# ImageComparison.vue
<template>
	<div class="comparison-container">
		<canvas ref="canvasRef" class="comparison-canvas"></canvas>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
	baseImage: {
		type: String,
		required: true,
	},
	compareImage: {
		type: String,
		required: true,
	},
});

const canvasRef = ref(null);

const loadImage = (src) => {
	return new Promise((resolve) => {
		const img = new Image();
		img.onload = () => resolve(img);
		img.src = src;
	});
};

const highlightDifferences = async () => {
	if (!props.baseImage || !props.compareImage || !canvasRef.value) return;

	const canvas = canvasRef.value;
	const ctx = canvas.getContext('2d');

	try {
		const [img1, img2] = await Promise.all([loadImage(props.baseImage), loadImage(props.compareImage)]);

		// 设置画布尺寸为 InFlow 图片(compareImage)的尺寸
		canvas.width = img2.width;
		canvas.height = img2.height;

		// 先将 InFlow 图片绘制到画布上
		ctx.drawImage(img2, 0, 0);
		const inflowData = ctx.getImageData(0, 0, canvas.width, canvas.height);

		// 创建临时画布存放提交的图片
		const tempCanvas = document.createElement('canvas');
		tempCanvas.width = canvas.width;
		tempCanvas.height = canvas.height;
		const tempCtx = tempCanvas.getContext('2d');

		// 绘制提交的图片到临时画布
		tempCtx.drawImage(img1, 0, 0);
		const submittedData = tempCtx.getImageData(0, 0, canvas.width, canvas.height);

		// 创建新的 ImageData 用于标记差异
		const outputData = ctx.createImageData(canvas.width, canvas.height);

		// 设置差异检测参数
		const threshold = 30; // 差异阈值
		const highlightR = 255; // 红色高亮
		const highlightOpacity = 0.4; // 高亮透明度

		// 逐像素进行比对
		for (let i = 0; i < inflowData.data.length; i += 4) {
			// 计算RGB通道的差异
			const rDiff = Math.abs(submittedData.data[i] - inflowData.data[i]);
			const gDiff = Math.abs(submittedData.data[i + 1] - inflowData.data[i + 1]);
			const bDiff = Math.abs(submittedData.data[i + 2] - inflowData.data[i + 2]);

			// 复制 InFlow 图片的原始像素
			outputData.data[i] = inflowData.data[i]; // R
			outputData.data[i + 1] = inflowData.data[i + 1]; // G
			outputData.data[i + 2] = inflowData.data[i + 2]; // B
			outputData.data[i + 3] = inflowData.data[i + 3]; // A

			// 如果检测到差异，将像素调整为红色
			if (rDiff > threshold || gDiff > threshold || bDiff > threshold) {
				// 混合红色高亮
				outputData.data[i] = Math.min(255, inflowData.data[i] + highlightR * highlightOpacity);
				outputData.data[i + 1] *= 1 - highlightOpacity; // 降低绿色分量
				outputData.data[i + 2] *= 1 - highlightOpacity; // 降低蓝色分量
			}
		}

		// 清空画布并绘制处理后的图像
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.putImageData(outputData, 0, 0);
	} catch (error) {
		console.error('Error processing images:', error);
	}
};

// 监听属性变化
watch([() => props.baseImage, () => props.compareImage], () => {
	highlightDifferences();
});

// 组件挂载后初始化
onMounted(() => {
	highlightDifferences();
});
</script>

<style scoped>
.comparison-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: white;
}

.comparison-canvas {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
</style>
